/*
 * @FilePath: \flutter_ducafecat_news_getx\lib\pages\main\widgets\hotbo.dart
 * @Date: 2022-07-18 13:15:21
 * @LastEditTime: 2022-07-19 09:40:21
 * @Description: 热门播客 ,组件使用：使用Listener()把控制每次滑动一个的逻辑。使用两个Listview.separated嵌套，
 */
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter_ducafecat_news_getx/common/values/colors.dart';
import 'package:flutter_ducafecat_news_getx/common/widgets/button.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:logger/logger.dart';

import '../index.dart';

var log = Logger();
Widget x(BuildContext context, int index) => Container(
      // color: AppColors.primaryElement,
      height: 170.h,
      width: 320.w,
      padding: EdgeInsets.symmetric(horizontal: 5.w),
      child: Container(
        height: 170.h,
        width: 320.w,
        child: ListView.separated(
            physics: NeverScrollableScrollPhysics(),
            itemBuilder: (context, thisindex) => Container(
                  height: 50.h,
                  width: 320.w,
                  child: Row(
                    children: [
                      Container(
                        height: 50.h,
                        width: 50.h,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(5.h)),
                          image: DecorationImage(
                            image: AssetImage('assets/images/eg_1.jpg'),
                            fit: BoxFit.cover,
                          ),
                        ),
                        child: Stack(
                          children: [
                            Positioned(
                              left: 0,
                              top: 0,
                              child: Text('${index * 3 + thisindex}',
                                  style: TextStyle(color: AppColors.tagNum)),
                            ),
                            Positioned(
                              right: -14.h,
                              bottom: -10.h,
                              child: Icon(
                                Icons.arrow_right,
                                color: AppColors.primaryBackground,
                                size: 50.sp,
                              ),
                            ),
                          ],
                        ),
                      ),
                      SizedBox(
                        width: 10.w,
                      ),
                      SizedBox(
                        height: 50.h,
                        width: 240.w,
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              '罗翔:令人愤怒的唐山打人案涉及什么大小指数走势分',
                              style: TextStyle(
                                  // height: 1,
                                  overflow: TextOverflow.ellipsis,
                                  fontSize: 14.sp),
                            ),
                            SizedBox(
                              height: 5.h,
                            ),
                            SizedBox(
                              width: 200.w,
                              child: Row(
                                children: [
                                  Container(
                                    padding:
                                        EdgeInsets.symmetric(horizontal: 2.w),
                                    margin: EdgeInsets.only(right: 5.w),
                                    decoration: BoxDecoration(
                                        border: Border.all(
                                            width: 0.5.w,
                                            color: Colors.transparent
                                                .withOpacity(0.5)),
                                        borderRadius: BorderRadius.all(
                                            Radius.circular(5.h))),
                                    height: 16.h,
                                    child: Text(
                                      '个人提升',
                                      style: TextStyle(
                                          color: AppColors.hotbo,
                                          fontSize: 10.sp),
                                    ),
                                  ),
                                  Text(
                                    '罗翔说刑法',
                                    style: TextStyle(
                                        color: AppColors.hotbo,
                                        fontSize: 13.sp),
                                  )
                                ],
                              ),
                            )
                          ],
                        ),
                      )
                    ],
                  ),
                ),
            separatorBuilder: (context, index) => Divider(
                  height: 10.h,
                  indent: 60.w,
                ),
            itemCount: 3),
      ),
    );

class Hot extends GetView<MainController> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 240.h,
      width: 375.w,
      padding: EdgeInsets.fromLTRB(10.w, 15.h, 10.w, 15.h),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(15.h)),
        color: AppColors.cardbg,
      ),
      child: Column(
        children: [
          Container(
            height: 30.h,
            width: 355.w,
            margin: EdgeInsets.only(bottom: 5.h),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  '热门播客',
                  style:
                      TextStyle(fontSize: 18.sp, fontWeight: FontWeight.bold),
                ),
                // Container(
                //   height: 25.h,
                //   decoration: BoxDecoration(
                //     borderRadius: BorderRadius.all(Radius.circular(15.w)),
                //     border: Border.all(
                //         width: 0.5, color: Colors.transparent.withOpacity(0.3)),
                //   ),
                //   child: TextButton(
                //     style: ButtonStyle(
                //       visualDensity: VisualDensity.compact,
                //       foregroundColor: MaterialStateProperty.all(Colors.black),
                //     ),
                //     onPressed: () {},
                //     child: Row(
                //       children: [
                //         Text('更多'),
                //         Icon(
                //           Icons.arrow_forward_ios_outlined,
                //           size: 12.sp,
                //         ),
                //       ],
                //     ),
                //   ),
                // )
                btnDetailWidget(buttonText: '更多')
              ],
            ),
          ),
          Container(
            height: 170.h,
            child: Listener(
              //手指按下触发动作
              onPointerDown: (event) {
                //打印起始坐标
                // log.d(event.position);
                //记录起始坐标
                controller.state.hotH = event.position.dx;
              },
              //手指抬起触发动作
              onPointerUp: controller.hotHPonit(),
              child: ListView.separated(
                  controller: controller.hotControl,
                  scrollDirection: Axis.horizontal,
                  cacheExtent: 10.w,
                  itemBuilder: (context, index) => x(context, index),
                  separatorBuilder: (context, index) => SizedBox(
                        width: 10.w,
                      ),
                  itemCount: 3),
            ),
          )
        ],
      ),
    );
  }
}
